<template>
  <div :class="['h-full',state.queryConfig.flutterAll?'':'flex','flex-col','bg-gray-100','relative','overflow-y-auto']">
    <!-- 筛选 -->
    <div class="p-4 pb-0 w-full" v-if="state.queryConfig.queryPanel">
      <div class="w-full card flex justify-between">
        <queryPanel :queryConfig="state.queryConfig" @flutterSend="(datas)=>{state.queryConfig.flutter = datas,xGrid.commitProxy('query')} "></queryPanel>
      </div>
    </div>
    <div class="p-4 w-full h-full overflow-y-auto">
      <div class="card h-full">
        <vxe-grid class="antdesign-vxetable" ref='xGrid' v-bind="state.tableConfig.gridOptions" @checkbox-all="checkBoxClickEvent" @checkbox-change="checkBoxClickEvent" @radio-change="checkBoxClickEvent">
          <template #iconSolt="{ row }">
            <my-Icon :type="row.icon"></my-Icon>
          </template>
          <template #operate="{ row }">
            <a-space :size="10">
              <a-button class="pl-0 pr-0" @click="addMenuRef.openModel(2,row)" type="link">
                详情
              </a-button>
              <span class=" text-gray-200" v-if="window.isDev">|</span>
              <a-button class="pl-0 pr-0" v-if="window.isDev" @click="addMenuRef.openModel(1,row)" type="link">
                编辑
              </a-button>
            </a-space>
          </template>
          <template #toolbar>
            <div class="flex justify-between items-center pt-0 pb-4" style="min-height:48px;">
              <div class="felx justify-start">
                <!-- 批量操作 -->
                <batchConfig v-if="state.tableConfig.showBatch" ref="batchConfigRef" :tableConfig="state.tableConfig" :xGrid="xGrid"></batchConfig>
              </div>
              <div class="flex justify-end items-center">
                <!-- 自定义操作 -->
                <a-space :size="10">
                  <a-button type="primary" @click="addMenuRef.openModel(0)">新增菜单</a-button>
                  <a-button type="primary" @click="addMenu2Ref.openModel(0)">新增菜单</a-button>
                </a-space>
                <div>
                  <!-- 表格设置 -->
                  <tableColumn class="ml-4" v-if="state.tableConfig.showColumn" :xGrid="xGrid" :gridOptions="state.tableConfig.gridOptions"></tableColumn>
                </div>
              </div>
            </div>
          </template>
          <template #empty>
            <a-empty />
          </template>
        </vxe-grid>
      </div>
    </div>
    <!-- 业务代码 -->
    <drawerName ref="addMenuRef" @save="xGrid.commitProxy('query')"></drawerName>
    <modelName ref="addMenu2Ref" @save="xGrid.commitProxy('query')"></modelName>
  </div>
</template>
<script setup>
// 组件
import drawerName from './drawer/drawerName.vue'
import modelName from './model/modelName.vue'
//API
import { tableMixin } from '@/javascript/antdesign/tableConfig'
import { reactive, toRefs, getCurrentInstance, onBeforeMount } from 'vue'
const prototype = getCurrentInstance().appContext.config.globalProperties

let state = reactive({
  //业务变量

  //业务组件
  addMenuRef: undefined,
  addMenu2Ref: undefined,

  //表格
  xGrid: null,
  batchConfigRef: undefined,
  tableConfig: {
    tableId: '菜单管理',
    type: 'checkbox',
    isTree: true,
    isPage: false,
    showBatch: true,
    showColumn: true,
    showImportBut: true,
    showExportBut: false,
    selectItems: [],
    batchGroup: [],
    importUrl: '',
    exportUrl: '',
    queryUrl: 'system/menu/listAllMenus',
    gridOptions: XEUtils.clone(tableMixin, true),
  },
  //筛选
  queryConfig: {
    flutterTitWidth: '0px',
    flutterAll: false,
    queryPanel: false,
    flutter: [],
  },
})

/* =================公共函数=================== */
const checkBoxClickEvent = (val) => {
  if (state.tableConfig.type === 'checkbox') {
    state.tableConfig.selectItems = [
      ...state.xGrid.getCheckboxRecords(),
      ...state.xGrid.getCheckboxReserveRecords(),
    ]
    state.batchConfigRef.setSelectItems(state.tableConfig.selectItems)
  } else if (state.tableConfig.type === 'radio') {
    state.tableConfig.selectItems = [val.row]
  }
}

/* =================初始化页面=================== */
onBeforeMount(() => {
  if (state.queryConfig.queryPanel) createQueryFull()
  if (state.tableConfig.showBatch) createBatchFull()
  createColumnsFull()
  createTableFull()
})
//创建表头数据
function createColumnsFull() {
  state.tableConfig.gridOptions.columns = [
    {
      type: state.tableConfig.type,
      fixed: 'left',
      minWidth: 55,
      title: '',
      width: 55,
      align: 'center',
      visible:
        state.tableConfig.type === 'checkbox' || state.tableConfig.type === 'radio' ? true : false,
    },
    { type: 'seq', title: '序号', visible: true, width: 65, align: 'center' },
    {
      field: 'name',
      title: '菜单名称',
      visible: true,
      minWidth: 120,
      treeNode: true,
    },
    {
      field: 'icon',
      title: '图标',
      visible: true,
      minWidth: 80,
      slots: { default: 'iconSolt' },
    },
    {
      field: 'type',
      title: '菜单类型',
      visible: true,
      minWidth: 100,
      
    },
    { field: 'show', title: '是否显示', visible: true, minWidth: 100 },
    { field: 'gmtCreated', title: '更新时间', visible: true, minWidth: 160 },
    {
      title: '操作',
      visible: true,
      width: 120,
      slots: { default: 'operate' },
      fixed: 'right',
      align: 'center',
    },
  ]
}

//创建筛选
function createQueryFull() {
  state.queryConfig.flutter = [
    {
      type: 'INPUT',
      operator: '=like=',
      title: '',
      show: true,
      value: undefined,
      key: 'name',
      placeholder: '搜索菜单名称',
    },
  ]
}

//批量操作配置
function createBatchFull() {
  state.tableConfig.batchGroup = [
    {
      name: '删除',
      url: 'system/menu/delete',
      key: 'menuIds',
      params: { corpId: state.store.business.tenantId },
    },
  ]
}

//创建表格
function createTableFull() {
  state.tableConfig.gridOptions.id = state.tableConfig.tableId
  if (state.tableConfig.isTree) {
    state.tableConfig.gridOptions.proxyConfig.props.result = 'data'
    state.tableConfig.gridOptions.proxyConfig.props.total = 'total'
    state.tableConfig.gridOptions.checkboxConfig.checkStrictly = false
    if (!state.tableConfig.isPage) state.tableConfig.gridOptions.pagerConfig.autoHidden = true
    state.tableConfig.gridOptions.treeConfig = {
      transform: true,
      rowField: 'id',
      parentField: 'parentId',
      children: 'children',
      reserve: false,
    }
  }
  state.tableConfig.gridOptions.loading = true
  state.tableConfig.gridOptions.proxyConfig.ajax = {
    query: ({ page, sorts }) => {
      const queryParams = {
        page: page.currentPage,
        size: page.pageSize,
        sort: null,
        filter: XEUtils.setFlutter(state.queryConfig.flutter),
      }
      if (sorts[0]) queryParams.sort = sorts[0].property + ',' + sorts[0].order
      return new Promise((resolve, reject) => {
        axios
          .get(`${state.tableConfig.queryUrl}?${XEUtils.serialize(queryParams)}`)
          .then((res) => {
            state.tableConfig.gridOptions.loading = false
            if (state.tableConfig.isPage) {
              if (state.tableConfig.isTree) {
                res.data.content = XEUtils.toTreeArray(res.data.content)
              }
            } else {
              if (state.tableConfig.isTree) {
                const computeData = (menuArr) => {
                  menuArr.forEach((element) => {
                    if (element.leaf !== undefined || element.leaf !== null) {
                      element.leaf = !element.leaf
                    }
                    if (element.children && element.children.length) {
                      computeData(element.children)
                    }
                  })
                }
                if (res.data.length) {
                  computeData(res.data)
                }
                res.data = XEUtils.toTreeArray(res.data)
                res.data.forEach((element) => {
                  delete element['children']
                })
              }
            }
            resolve(res)
          })
      })
    },
  }
}

const { xGrid, addMenuRef, addMenu2Ref, batchConfigRef } = toRefs(state)
</script>